import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import './index.scss'
import http from '@/api'

export default class InventoryManageDetail extends Component {
  state = {
    carIcon: require('@/assets/images/car_icon.png'),
    fileIcon: require('@/assets/images/file_icon.png'),
    opinions: [
      {
        name: '继续盘库',
        value: 'success',
      }, {
        name: '订单完成',
        value: 'fail',
      }],
    detail: {},
    basicInfo: [],
    carInfo: [],
    wlInfo: [],
    imageList: {},
    carImg: [],
    carinImg: [],
    infoImg: [],
    abnormalImg: [],
    advance: [],
    update: [],
    previewImg: {
      itemStatus: false,
      itemUrl: ''
    },
  }

  componentDidMount () {
    this.getStocktaking()
  }
  // 获取数据
  getStocktaking () {
    let params = {
      id : this.$router.params.id
    }
    http.getinventoryAdvance(params).then((data) => {
      let infoData = {
        ...data.panKuDianZi[0].loginMessage,
        ...data.panKuDianZi[0].order,
      }

      // let imageList = this.handleImages(infoData)
      let imageList = this.handleImg(infoData)

      this.handleInfo(infoData)
      this.setState({ detail: infoData, ...imageList }, () => {
        console.log(this.state)
      })
    })
  }

  handleInfo (detail) {
    const basicInfoMap = {
     'orderCode': '订单号',
     'useDays': '用款天数',
      'useDate': '用款日期',
      'backDate': '还款日期',
     'carType': '车型',
     'lessMemoy': '垫资金额',
     'totalMemoy': '合同金额',

    }
    const carInfoMap = {
      'carColor': '外观颜色',
      'carInside': '内饰颜色',
      'carCode': '车架号',
      'orderMemoy': '已付定金',
    }
    const wlInfoMap = {
      'originalLocation': '物流始发地',
      'purposeLocation': '物流目的地',
      'aarivalLocation': '物流提车地址',
      'addressName': '盘库地址',
      'checkCarTime': '最新盘库时间',
    }
    let basicInfo = []
    let carInfo = []
    let wlInfo = []

    Object.keys(basicInfoMap).forEach(key => {
      if (key === 'useDays') {
        detail.useDays = detail.useDays + '天'
      }
      basicInfo.push({
        label: basicInfoMap[key],
        value: detail[key] || '--',
      })
    })
    Object.keys(carInfoMap).forEach(key => {
      if (key === 'orderMemoy') detail.orderMemoy = detail.orderMemoy + '元'
      carInfo.push({
        label: carInfoMap[key],
        value: detail[key] || '--',
      })
    })
    Object.keys(wlInfoMap).forEach(key => {
      wlInfo.push({
        label: wlInfoMap[key],
        value: detail[key] || '--',
      })
    })
    this.setState({ basicInfo, carInfo, wlInfo })
  }

  handleImages (list) {
    let imageList = list.map((item) => {
      let isPanku
      if (item.status == 1 || item.status == 3) {
        isPanku = false
      } else if (item.status == 2 || item.status == 4) {
        isPanku = true
      }
      let objectTemp = {
        stocktakingArea: item.stocktakingArea,
        stocktakingDate: item.stocktakingDate,
        carImg: [],
        carinImg: [],
        infoImg: [],
        abnormalImg: [],
        isPanku,
        updator: item.updator,
      }
      item.carStocktakingFiles.forEach((imgObj) => {
        let obj = {}
        if (imgObj.imgType === 1) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.carImg.push(obj)
        } else if (imgObj.imgType === 2) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.carinImg.push(obj)
        } else if (imgObj.imgType === 3) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.infoImg.push(obj)
        } else if (imgObj.imgType === 4) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.abnormalImg.push(obj)
        }
      })

      return objectTemp
    })
    return imageList.filter((item,i)=>i===0)
  }

  handleImg(data) {
    let carImg = [data.idCardUrl, data.idCardUrl1], // 车主身份证照片
      carinImg = [data.orderUrl], // 采购合同
      infoImg = [data.memoyRoadUrl], // 付款路径
      abnormalImg = [data.companyPermitssionUrl], // 按揭申请图片/上游公司营业执照
      advance = [data.payMemoyUrl], // 支付定金
      update = [data.checkCarUrl1, data.checkCarUrl2, data.checkCarUrl3, data.checkCarUrl4, data.checkCarUrl5] // 盘库上传
    let allImg = { carImg, carinImg, infoImg, abnormalImg, advance, update}

    return allImg
  }

  handleStatusText (status) {
    return {
      1: '待盘库',
      2: '已盘库',
      // 3: '继续盘库',
      3: '待盘库',
      4: '订单完成',
    }[status]
  }

  handleStatusBarClass (status) {
    return {
      1: 'no-pass',
      2: 'pass',
      // 3: '继续盘库',
      3: 'no-pass',
      4: 'pass',
    }[status]
  }

  confirmPanku (id) {
    http.confirmPanku(id).then(() => {
      Taro.showToast({
        title: '确认成功',
        icon: 'success',
      })
      setTimeout(Taro.navigateBack, 2000)
    })
  }

  continuePanku (id) {
    http.continuePanku(id).then(({ data }) => {
      Taro.showToast({
        title: '确认成功',
        icon: 'success',
      })
      setTimeout(Taro.navigateBack, 2000)
    })
  }
  // 图片预览
  onLookHandle(url) {
    if (window.bridge) {
      let _images = [], i = 0
      _images.push(url)
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        previewImg: {
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }
  onLookItem() {
    this.setState({
      previewImg: {
        ...this.state.previewImg,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }


  render () {
    const {
      opinions,
      fileIcon,
      carIcon,
      basicInfo,
      carInfo,
      wlInfo,
      carImg,
      carinImg,
      infoImg,
      abnormalImg,
      advance,
      update,
      detail,
      imageList,
      status,
      previewImg
    } = this.state
    const head = 'https://www.coolkar.com.cn/honor'
    return (
      <View className="inventory-manage-detail">
        <DNavBar title="盘库管理详情"></DNavBar>
        <View className="info">
          <View className="title">
            <Image src={fileIcon} className="title_icon"></Image>
            <Text className="title_text">基本信息</Text>
          </View>
          {
            basicInfo.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value" style={{fontWeight:'500'}}>{item.value}</View>
            </View>)
          }

          <View className="title">
            <Image src={carIcon} className="title_icon"></Image>
            <Text className="title_text">车辆及上下游公司信息</Text>
          </View>
          {
            carInfo.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value" style={{ fontWeight: '500' }}>{item.value}</View>
            </View>)
          }

          <View className="title">
            <Image src={carIcon} className="title_icon"></Image>
            <Text className="title_text">物流&盘库信息</Text>
          </View>
          {
            wlInfo.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value" style={{ fontWeight: '500' }}>{item.value}</View>
            </View>)
          }

          {
            // 查看判断是否有更新到
            // imageList.map((item,i) => (
           <View>
                <View className="border"></View>
                <View className="photo_item flex-box between">
                  <View className="photo_label">车主身份证</View>
                  <View className="photo_value t-right">
                    {
                      carImg.map(
                        img => {
                          return img ? <Image className="photo" src={head+img} onClick={this.onLookHandle.bind(this, head + img)}></Image> : ''
                        }
                      )
                    }
                  </View>
                </View>
                <View className="photo_item flex-box between">
                  <View className="photo_label">采购合同</View>
                  <View className="photo_value t-right">
                    {
                      carinImg.map(
                        img => {
                          return img ? <Image className="photo" src={head + img} onClick={this.onLookHandle.bind(this, head + img)}></Image> : ''
                        })
                    }
                  </View>
                </View>
                <View className="photo_item flex-box between">
                  <View className="photo_label">付款路径</View>
                  <View className="photo_value t-right">
                    {
                      infoImg.map(
                        img => {
                          return img ? <Image className="photo" src={head + img} onClick={this.onLookHandle.bind(this, head + img)}></Image> : ''
                        })
                    }
                  </View>
                </View>
                {
                  <View className="photo_item flex-box between">
                    <View className="photo_label">按揭申请图片/上游公司营业执照</View>
                    <View className="photo_value t-right">
                      {
                      abnormalImg.map(img => {
                        return img ? <Image className="photo" src={head + img} onClick={this.onLookHandle.bind(this, head + img)}></Image> : ''
                      })
                      }
                    </View>
                  </View>
                }
               <View className="photo_item flex-box between">
                 <View className="photo_label">支付定金</View>
                 <View className="photo_value t-right">
                   {
                    advance.map(
                      img => {
                        return img ? <Image className="photo" src={head + img} onClick={this.onLookHandle.bind(this, head + img)}></Image> : ''
                      })
                   }
                 </View>
               </View>

                <View className="photo_item flex-box between">
                  <View className="photo_label">库盘上传</View>
                  <View className="photo_value t-right">
                    {
                      update.map(img => {
                        return img ? <Image className="photo" src={head + img} onClick={this.onLookHandle.bind(this, head + img)}></Image> : ''
                      })
                    }
                  </View>
                </View>
              </View>

            // ))
          }
        </View>

        <DLookImages status={previewImg.itemStatus} url={previewImg.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
      </View>
    )
  }
}
